<template>
  <view class="case-edit">
    <form @submit="handleSubmit">
      <!-- 基本信息表单 -->
      <view class="form-card">
        <view class="form-group">
          <text class="label">案件标题</text>
          <input 
            class="input" 
            v-model="formData.caseTitle" 
            placeholder="请输入案件标题"
            :maxlength="100"
          />
        </view>

        <view class="form-group">
          <text class="label">案件类别</text>
          <picker 
            class="picker" 
            :range="categoryOptions" 
            range-key="label"
            :value="categoryIndex"
            @change="handleCategoryChange"
          >
            <view class="picker-value">
              {{ formData.caseCategory || '请选择案件类别' }}
            </view>
          </picker>
        </view>

        <view class="form-group">
          <text class="label">案件状态</text>
          <picker 
            class="picker" 
            :range="statusOptions" 
            range-key="label"
            :value="statusIndex"
            @change="handleStatusChange"
          >
            <view class="picker-value">
              {{ getStatusText(formData.status) || '请选择案件状态' }}
            </view>
          </picker>
        </view>
      </view>

      <!-- 案件内容编辑器 -->
      <view class="form-card">
        <view class="form-group">
          <text class="label">案件内容</text>
          <editor
            id="editor"
            class="editor"
            :placeholder="'请输入案件内容'"
            @ready="onEditorReady"
            :show-img-size="true"
            :show-img-toolbar="true"
            :show-img-resize="true"
            @input="onEditorInput"
          ></editor>
        </view>
      </view>

      <!-- 提交按钮 -->
      <view class="form-actions">
        <button 
          class="submit-btn" 
          type="primary" 
          :loading="submitting"
          form-type="submit"
        >保存</button>
        <button 
          class="cancel-btn" 
          @click="handleCancel"
        >取消</button>
      </view>
    </form>
  </view>
</template>

<script>
import { getCaseDetail, updateCase, createCase } from '@/api/case'

export default {
  data() {
    return {
      caseId: null,
      editorCtx: null,
      submitting: false,
      formData: {
        caseTitle: '',
        caseCategory: '',
        status: '',
        caseContent: ''
      },
      categoryOptions: [
        { label: '民事案件', value: 'civil' },
        { label: '刑事案件', value: 'criminal' },
        { label: '行政案件', value: 'administrative' },
        { label: '经济案件', value: 'economic' }
      ],
      statusOptions: [
        { label: '待处理', value: 'pending' },
        { label: '处理中', value: 'processing' },
        { label: '已完成', value: 'completed' },
        { label: '已取消', value: 'cancelled' }
      ],
      categoryIndex: 0,
      statusIndex: 0
    }
  },

  onLoad(options) {
    if (options.id) {
      this.caseId = options.id
      this.fetchCaseDetail()
    }
  },

  methods: {
    async fetchCaseDetail() {
      try {
        const response = await getCaseDetail(this.caseId)
        const caseData = response.data
        this.formData = {
          caseTitle: caseData.caseTitle,
          caseCategory: caseData.caseCategory,
          status: caseData.status,
          caseContent: caseData.caseContent
        }
        
        // 设置选择器的默认值
        this.categoryIndex = this.categoryOptions.findIndex(
          option => option.value === caseData.caseCategory
        )
        this.statusIndex = this.statusOptions.findIndex(
          option => option.value === caseData.status
        )
        
        // 设置编辑器内容
        this.$nextTick(() => {
          if (this.editorCtx) {
            this.editorCtx.setContents({ html: caseData.caseContent })
          }
        })
      } catch (error) {
        uni.showToast({
          title: '获取案例详情失败',
          icon: 'none'
        })
      }
    },

    onEditorReady() {
      uni.createSelectorQuery()
        .select('#editor')
        .context((res) => {
          this.editorCtx = res.context
          if (this.formData.caseContent) {
            this.editorCtx.setContents({ html: this.formData.caseContent })
          }
        })
        .exec()
    },

    onEditorInput(e) {
      this.formData.caseContent = e.detail.html
    },

    handleCategoryChange(e) {
      const index = e.detail.value
      this.categoryIndex = index
      this.formData.caseCategory = this.categoryOptions[index].value
    },

    handleStatusChange(e) {
      const index = e.detail.value
      this.statusIndex = index
      this.formData.status = this.statusOptions[index].value
    },

    getStatusText(status) {
      const option = this.statusOptions.find(opt => opt.value === status)
      return option ? option.label : ''
    },

    validateForm() {
      if (!this.formData.caseTitle) {
        uni.showToast({
          title: '请输入案件标题',
          icon: 'none'
        })
        return false
      }
      if (!this.formData.caseCategory) {
        uni.showToast({
          title: '请选择案件类别',
          icon: 'none'
        })
        return false
      }
      if (!this.formData.status) {
        uni.showToast({
          title: '请选择案件状态',
          icon: 'none'
        })
        return false
      }
      if (!this.formData.caseContent) {
        uni.showToast({
          title: '请输入案件内容',
          icon: 'none'
        })
        return false
      }
      return true
    },

    async handleSubmit() {
      if (!this.validateForm()) return
      
      this.submitting = true
      try {
        if (this.caseId) {
          // 更新案例
          await updateCase(this.caseId, this.formData)
          uni.showToast({
            title: '更新成功',
            icon: 'success'
          })
        } else {
          // 创建新案例
          await createCase(this.formData)
          uni.showToast({
            title: '创建成功',
            icon: 'success'
          })
        }
        
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      } catch (error) {
        uni.showToast({
          title: this.caseId ? '更新失败' : '创建失败',
          icon: 'none'
        })
      } finally {
        this.submitting = false
      }
    },

    handleCancel() {
      uni.navigateBack()
    }
  }
}
</script>

<style>
.case-edit {
  padding: 20rpx;
}

.form-card {
  background-color: #fff;
  border-radius: 8rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 20rpx;
}

.form-group:last-child {
  margin-bottom: 0;
}

.label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.input {
  width: 100%;
  height: 80rpx;
  border: 1px solid #ddd;
  border-radius: 4rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.picker {
  width: 100%;
  height: 80rpx;
  border: 1px solid #ddd;
  border-radius: 4rpx;
}

.picker-value {
  height: 80rpx;
  line-height: 80rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
}

.editor {
  min-height: 400rpx;
  border: 1px solid #ddd;
  border-radius: 4rpx;
  padding: 20rpx;
  box-sizing: border-box;
}

.form-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-around;
}

.submit-btn, .cancel-btn {
  width: 45%;
}

.cancel-btn {
  background-color: #f5f5f5;
  color: #666;
}
</style> 